<template>
  <div>

    <a-modal title="调价" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel" width="800px">
      <a-row>
        <a-col :span="4">
          商品名称
        </a-col>
        <a-col :span="8" :offset="2">
          名创优品叮当加湿器DL-1
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4">
          商品原价
        </a-col>
        <a-col :span="8" :offset="2">
          399元
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4">
          销售价格
        </a-col>
        <a-col :span="8" :offset="2">
          190
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4">
          采购价
        </a-col>
        <a-col :span="8" :offset="2">
          <a-input style="width:150px;height:40px" default-value="100" />元
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4">
          分销价
        </a-col>
        <a-col :span="8" :offset="2">
          <a-input style="width:150px;height:40px" default-value="180" />元
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" style="">
          规格价格设置
        </a-col>
      </a-row>
      <a-row>
        <a-col :offset="1">
          <a-table :columns="columns" :pagination="false" :data-source="data">
            <a slot="name" slot-scope="text">{{ text }}</a>
          </a-table>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">
          价格有效期
        </a-col>
        <a-col :span="8" :offset="2">
          2024年至
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">
        </a-col>
        <a-col :span="4" :offset="2">
          <a-radio-group v-model="value" @change="onChange">
            <a-radio style="margin-bottom=20px" :style="radioStyle" :value="1">
              <a-date-picker @change="onChange" placeholder="结束日期" />
            </a-radio>
            <a-radio :style="radioStyle" :value="2">
              长期有效
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      //   表格内容
      data,
      columns,
      value:''
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      this.visible = false
    },
    // 单选框
    onChange(){

    }
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-modal-content {
  .ant-modal-footer {
    border-top: none;
    margin: 30px 0;
  }
}
.ant-row {
  margin-bottom: 25px;
  color: #000;
  line-height: 40px;

  .ant-col {
    &:first-child {
      text-align: end;
    }
  }
}
/deep/.ant-col .ant-col-4 .ant-col-offset-1 {
  color: #000;
}
.ant-input {
  border-color: #000;
  color: #000;
  margin-right: 5px;
}
.ant-input:hover {
  border-color: #000;
}
.ant-radio-wrapper{
    margin-bottom: 20px;
    color:#000
}
</style>
